<template>
  <div class="Emergency">
    <div class="flex marginB5 location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>资源调配</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="overflowX">
        <el-row :gutter="24">
          <el-col :span="6">
            <div class="Emergency-dt">
              <div class="Emergency-tb-bd">
                <el-select v-model="sourceInfo" placeholder="请选择" style="width:100%">
                  <el-option v-for="(item,index) in Response" :key="index" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="mapContent">
                <MapContent @typeNames="childData" :mapZoom="7"/>
              </div>
            </div>
          </el-col>
          <el-col :span="11">
            <ResourceTable />
          </el-col>
          <el-col :span="7">
            <Allocation />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import ResourceTable from "./components/ResourceTable.vue";
import Allocation from "./components/Allocation.vue";
import MapContent from "./components/mapContent.vue";
import { GetResponse } from "@/api/EmergencyDisposal/homepagecontent.js";
export default {
  name: "ResourceAllocation",
  components: { MapContent, ResourceTable, Allocation },
  data() {
    return {
      Response: [],
      sourceInfo: "",
      typeName: ""
    };
  },
  mounted() {
    this.GetResponses();
  },
  methods: {
    async GetResponses() { // 命令单
      const res = await GetResponse();
      const option = res.map((i) => {
        return {
          label: i.responseName,
          value: i.id
        };
      });
      this.Response = option;
    },
    childData(param) {
      console.log(param);
    }
  }
};
</script>

<style scoped lang="less">
.Emergency {
  padding: 0px 20px;
  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    font-size: 16px;
    color: #fff;
  }
  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    font-size: 16px;
    color: #fbd359;
  }
  .Emergency-center {
    margin-top: 10px;
    .overflowX {
      width: 160%;
    }
    .Emergency-dt {
      width: 100%;
      height: 100%;
      .mapContent {
        width: 100%;
        // height: 100%;
        height: 93.8vh;
        border-radius: 4px;
        border: #3270ff 1px solid;
      }
    }
  }
}
.Emergency-tb-bd {
  :deep(.el-select) {
    .el-input--suffix .el-input__inner {
      box-shadow: 1px 1px 10px 2px #36afff inset;
      border: none;
      border-radius: 5px;
      color: #eeeeee;
      background-color: rgba(34, 88, 143, 0.5);
    }
  }
}
// options 样式
:deep(.el-select-dropdown) {
  background-color: rgba(0, 35, 80, 0.4);
}
:deep(.el-popper[x-placement^="bottom"]) {
  margin-top: 0;
}
</style>
